<template>
  <view class="music-list-detail" v-if="songInfo.name">
    <view class="header">
      <view class="info">
        <image class="img" :src="songInfo.coverImgUrl" mode=""></image>
        <view class="right-title">
          <view class="title">
            {{songInfo.name}}
          </view>
          <view class="author">
            <image class="avatar" :src="songInfo.creator.avatarUrl" mode=""></image>
            {{songInfo.creator.nickname}}
          </view>
          <view class="tag">
            <view v-for="item,index in songInfo.tags" :key="index" class="tag-item">{{item}}
              <uni-icons color="#fff" type="right" size="12"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <view class="desc">
        {{songInfo.description}}
      </view>
      <view class="mutual" v-if="subscribed!==null">
        <view class="btn">
          <uni-icons size="18" color="#fff" custom-prefix="iconfont" type="icon-zhuanfa"></uni-icons>
          <text class="text">{{songInfo.shareCount}}</text>
        </view>
        <view class="btn">
          <uni-icons size="20" color="#fff" custom-prefix="iconfont" type="icon-pinglun"></uni-icons>
          <text class="text">{{songInfo.commentCount}}</text>
        </view>
        <view @click="subscribeHandler" class="btn" :class="{isSubscribed:subscribed}">
          <uni-icons size="20" color="#fff" custom-prefix="iconfont" type="icon-yigou"></uni-icons>
          <text class="text">{{numberFormat(songInfo.subscribedCount)}}</text>
        </view>
      </view>
    </view>
    <view class="song-content">
      <view @click="playAllMusic" class="head">
        <uni-icons size="20" color="#ff012f" custom-prefix="iconfont" type="icon-bofang"></uni-icons>
        <view class="total">
          播放全部
        </view>
        <text v-if="songDetail" class="num">({{songDetail.length}})</text>
      </view>
      <view class="song-box">
        <view @click="gotoPlay(index,item.id)" v-for="item,index in songDetail" :key="item.id" class="song-item">
          <view class="index">
            {{index+1}}
          </view>
          <view class="song-info-box">
            <view class="title">
              {{item.name}}
            </view>
            <view class="song-desc">
              {{item.ar[0].name}}
            </view>
          </view>
          <uni-icons color="#5b5b5b" size="18" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    onLoad
  } from "@dcloudio/uni-app";
  import {
    audio
  } from '@/utils/audio.js'
  import {
    subscribeSongOrder
  } from "@/request/order.js"
  import {
    getMusicList,
    getMusicListInfo
  } from '@/request/api.js'
  import {
    ref,
    reactive
  } from "vue";
  import {
    isUseSong
  } from '@/request/api.js'
  import {
    useStore
  } from "vuex";
  const store = useStore()
  const songDetail = ref([])
  const songInfo = ref({})
  const subscribed = ref(null)
  onLoad(async (option) => {
    console.log(option.id);
    const res = await getMusicListInfo(option.id)
    songInfo.value = res.playlist
    const res1 = await getMusicList(option.id)
    songDetail.value = res1.songs
    subscribed.value = res.playlist.subscribed
  })
  const numberFormat = (num) => {
    return num > 9999 ? (num / 10000).toFixed(1) + '万' : num
  }
  // 跳转页面
  const gotoPlay = async (index, id) => {
    const playData = {}
    playData.index = index
    playData.songDetail = songDetail.value
    // 判断歌曲是否可用
    const res = await isUseSong(id)
    if (!res.success) {
      return uni.showModal({
        content: '对不起，该音乐暂无版权',
        title: '提示',
        confirmColor: '#ee6666', //确定字体颜色
        showCancel: false, //没有取消按钮的弹框
        buttonText: '确定'
      })
    }
    let obj = encodeURIComponent(JSON.stringify(playData)).replace(/%/g, '%25')
    uni.navigateTo({
      url: `/pages/play/play?item=${obj}`,
      success() {
        // audio.play()
        if(!audio.autoplay){
          audio.autoplay = true
        }
        // let time = setInterval(() => {
        //   if (store.state.player.musicStatus) {
        //     audio.play()
        //     audio.autoplay = true
        //     clearInterval(time)
        //   }

        // }, 200)
      }
    })
  }
  const playAllMusic = () => {
    gotoPlay(0, songDetail.value[0].id)
  }
  const subscribeHandler = async () => {
    if (subscribed.value) {
      uni.showModal({
        content: "确定取消该歌曲收藏吗?",
        async success() {
          // 取消收藏
          await subscribeSongOrder({
            t: 2,
            id: songInfo.value.id
          })
          subscribed.value = false
        }
      })
    } else {
      // 收藏
      try {
        const res = await subscribeSongOrder({
          t: 1,
          id: songInfo.value.id
        })
        subscribed.value = true
        uni.showToast({
          title: "收藏成功",
          // position:"top"
        })
      } catch (e) {
        //TODO handle the exception
        uni.showToast({
          title: "暂未登录",
          icon: "error"
          // position:"top"
        })
      }

    }
  }
</script>

<style lang="less">
  .music-list-detail {
    .header {
      padding: 22rpx 32rpx;
      background-color: #b95600;

      .info {
        display: flex;

        .img {
          min-width: 200rpx;
          width: 200rpx;
          height: 200rpx;
          border-radius: 18rpx;
          margin-right: 32rpx;
        }

        .right-title {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .title {
            color: #fff;
            font-size: 30rpx
          }

          .tag {
            display: flex;

            .tag-item {
              display: flex;
              font-size: 12px;
              padding: 2rpx 0rpx 2rpx 6rpx;
              color: #fff;
              background-color: rgba(255, 255, 255, 0.2);
              margin-right: 5px;
              border-radius: 3px;
            }
          }

          .author {
            display: flex;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);

            .avatar {
              width: 45rpx;
              height: 45rpx;
              border-radius: 50%;
              margin-right: 15rpx;
            }
          }
        }
      }

      .desc {
        margin: 26rpx 0;
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .mutual {
        display: flex;
        justify-content: space-around;

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60rpx;
          // line-height: 60rpx;
          border-radius: 30rpx;
          font-size: 14px;
          color: #fff;
          width: 160rpx;
          text-align: center;
          background-color: rgba(255, 255, 255, 0.4);

          .text {
            margin-left: 8rpx;
          }

          &:nth-child(3) {
            background-color: #dc315f;
          }

          &.isSubscribed {
            background-color: rgba(255, 255, 255, 0.4);
          }
        }
      }
    }
  }

  .song-content {
    padding: 0 32rpx;

    .head {
      height: 80rpx;
      display: flex;
      align-items: center;
      padding: 10rpx 0;
      // border: 1px solid #efefef;

      .num {
        font-weight: normal;
        font-size: 26rpx;
        color: #9c9c9c;
      }

      .total {
        margin-left: 22rpx;
        font-weight: bold;
        font-size: 30rpx;
        margin-right: 8rpx;
      }
    }

    .song-box {
      .song-item {
        display: flex;
        align-items: center;
        padding: 10rpx 0;
        border-bottom: 1px solid #efefef;

        .index {
          color: #666666;
          font-size: 30rpx;
          margin-right: 34rpx;
          width: 30rpx;
          text-align: right;
        }

        .song-info-box {
          flex: 1;

          .title {
            font-size: 30rpx;
          }

          .song-desc {
            font-size: 28rpx;
            color: #5b5b5b;
          }
        }

      }
    }
  }
</style>
